<template>
    <div class="login-page">
      <div class="login-container">
        <h1>低空经济大模型</h1>
        <div class="input-group">
          <span class="icon user-icon"></span>
          <input
            type="text"
            placeholder="用户名"
            v-model="loginForm.username"
            @keyup.enter="submitForm('loginForm')"
          >
        </div>
        <div class="input-group">
          <span class="icon password-icon"></span>
          <input
            type="password"
            placeholder="密码"
            v-model="loginForm.password"
            @keyup.enter="submitForm('loginForm')"
          >
        </div>
        
        <!-- <div class="extra-row">
          <el-checkbox v-model="checked">记住我</el-checkbox>
          <a href="#" @click.prevent="handleForgotPassword">忘记密码？</a>
        </div> -->
      <!--  <button
          class="login-btn"
          :disabled="loadding"
          @click="submitForm('loginForm')"
        >
          {{ loadding ? '登录中...' : '登录' }}
        </button> -->
        <el-button type="primary" :loading='loadding'  class="login-btn" @click="submitForm('loginForm')" @keyup.enter.native="submitForm('loginForm')"> {{ loadding ? '登录中...' : '登录' }}</el-button>
      </div>
    </div>
</template>

<script>
 import {
    encrypt
  } from "../../utils/util.js";
    import CryptoJS from 'crypto-js';
export default {
  data() {
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入登录账号"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var checkCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    return {
	  checked: false,
	  loadding:false,
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validateUser, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        smscode: [{ validator: checkCode, trigger: "blur" }]
      },
      arrToken: [],
      userToken: [],
      columns: []
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取验证码
    // this.getRandomCell();
	  // this.getCookie();
  },
  methods: {

    submitForm(formName) {
      let _this = this;
      this.loadding=true
      let params = {
        username: this.loginForm.username,
        // password: this.$AesEncrypt(this.loginForm.password),
        password: this.loginForm.password,
      };
      this.$httpApi.login(params).then((res) => {
        if (res.success) {
          // sessionStorage.setItem("su", JSON.stringify(res.data.userInfo));
          sessionStorage.setItem("token",res.data.token);
          //判断复选框是否被勾选 勾选则调用配置cookie方法
          if (_this.checked == true) {
            //传入账号名，密码，和保存天数3个参数
            _this.setCookie(_this.loginForm.username, _this.loginForm.password, 7);
            this.checked = true;
          } else {
            _this.clearCookie();
            this.checked = false;
          }
          _this.$router.push({
            path: "/main",
          });
          setTimeout(()=>{
            this.getUserInfo()
          },500)
        } else {
          _this.$message.error(res.msg);
      	_this.loadding=false
        }
      })
      return
      this.$refs[formName].validate(valid => {
        if (valid) {
		  this.loadding=true
			let params = {
			  username: this.loginForm.username,
			  password: this.loginForm.password,
			};
			var _this = this;
			this.$httpApi.login(params).then((res) => {
			  if (res.success) {
			    // sessionStorage.setItem("su", JSON.stringify(res.data.userInfo));
			    sessionStorage.setItem("token",res.data.token);
			    //判断复选框是否被勾选 勾选则调用配置cookie方法
			    if (_this.checked == true) {
			      //传入账号名，密码，和保存天数3个参数
			      _this.setCookie(_this.loginForm.username, _this.loginForm.password, 7);
			      this.checked = true;
			    } else {
			      _this.clearCookie();
			      this.checked = false;
			    }
			    _this.$router.push({
			      path: "/main",
			    });
          setTimeout(()=>{
            this.getUserInfo()
          },500)
			  } else {
			    _this.$message.error(res.msg);
				_this.loadding=false
			  }
			});
        } else {
		  this.loadding=false
          return false;
        }
      });
    },
    // 获取用户信息
    getUserInfo(){
        this.$httpApi.getLoginUserInfo().then((res) => {
          if (res.success) {
             sessionStorage.setItem("userInfo", JSON.stringify(res.data));
          } else {
            this.$message.error(res.msg);
          }
        });
    },
		//清除cookie
		clearCookie: function () {
		  this.setCookie("userName", "", -1); //修改2值都为空，天数为负1天就好了
		  this.setCookie("userPwd", "", -1);
		},
	//设置cookie
	setCookie(c_name, c_pwd, exdays) {
	  let exdate = new Date(); //获取时间
	  exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
	  //字符串拼接cookie
	  window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
	  window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
	},
	//读取cookie
	getCookie: function () {
	  if (document.cookie.length > 1) {
	    let arr = document.cookie.split("; ");
	    for (let i = 0; i < arr.length; i++) {
	      let arr2 = arr[i].split("=");
	      //判断查找相对应的值
	      if (arr2[0] == "userName") {
	        this.loginForm.username = arr2[1];
	      } else if (arr2[0] == "userPwd") {
	        this.loginForm.password = arr2[1];
	      }
	    }
	    if (this.loginForm.username == "" && this.loginForm.password == "") {
	      this.checked = false;
	    } else {
	      this.checked = true;
	    }
	  } else {
	    this.checked = false;
	  }
	},
  }

};
</script>
<style lang="less" scoped>

.login-page {
  /* 背景样式，模拟设计图的蓝色渐变和线条感 */
  background:url('../../assets/image/bj.png') no-repeat;
  background-size:100% 100%;
  /* 让内容垂直水平居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: "微软雅黑", sans-serif;
}

/* 登录容器样式，模拟设计图的蓝色气泡形状 */
.login-container {
  position: relative;
  width: 510px;
  height:590px;
 background:url('../../assets/image/ct.png') no-repeat;
 background-size:100% 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 标题样式 */
.login-container h1 {
  color: #fff;
  font-size: 24px;
  margin:120px 0 30px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 输入框容器样式，用于包裹输入框和图标 */
.input-group {
  position: relative;
  width: 60%;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

/* 输入框通用样式 */
.input-group input {
  width: 100%;
  padding: 12px 40px 12px 40px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 用户名、密码输入框聚焦样式 */
.input-group input:focus {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}
/* 图标样式，使用绝对定位放到输入框内 */
.input-group .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 17px;
  background-size: cover;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* 用户名输入框左侧图标（示例，可替换成实际图标） */
.input-group .user-icon {
  background-image: url('../../assets/image/icon1.png'); /* 需替换成实际图标路径 */
  background-size: 100%;
}

/* 密码输入框左侧图标（示例，可替换成实际图标） */
.input-group .password-icon {
  background-image: url('../../assets/image/icon2.png'); /* 需替换成实际图标路径 */
    background-size: 100%;
}

/* 记住密码和忘记密码容器样式 */
.extra-row {
  width: 60%;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* 忘记密码链接样式 */
.extra-row a {
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}
/deep/.el-checkbox{
  color: #fff;
}
/deep/.el-checkbox__input.is-checked+.el-checkbox__label{
  color: #e0e0e0;
}
.extra-row a:hover {
  text-decoration: underline;
  color: #e0e0e0;
}

/* 登录按钮样式 */
.login-btn {
  width:60%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  background-color: #003f7f;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.login-btn:hover {
  background-color: #002b5b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.login-btn:disabled {
  background-color: #4a6fa5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

</style>
